<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h2>第一种</h2>
    <button class="btn1">发送get请求</button>
    <button class="btn2">发送post请求</button>
    <h2>第二种</h2>
    <button class="btn3">发送get请求</button>
    <button class="btn4">发送post请求</button>
    <script src="axios.js"></script>
    <script>
      // axios使用方法1
      //   axios({
      //     url: "请求路径",
      //     method: "请求方法",
      //     params: { get参数 },
      //     data: { post参数 },
      //   }).then((res) => {});

      // axios使用方法2
      //  axios.get('请求路径',{ params:{ get参数 }}).then(res =>{})
      //  axios.post('请求路径',{ post参数 }).then(res =>{})

      // axios使用方法1
      document.querySelector(".btn1").addEventListener("click", function () {
        axios({
          url: "http://ajax-base-api-t.itheima.net/api/getbooks",
          method: "get",
          params: { bookname: "西游记" },
          // then 然后呢
        }).then((res) => {
          // res 就是简写的 response
          // res并不是服务器响应的数据 而是axios自己包的一层对象
          console.log(res.data);
        });
      });

      document.querySelector(".btn2").addEventListener("click", function () {
        axios({
          url: "http://ajax-api.itheima.net/api/login",
          method: "post",
          data: {
            username: "admin",
            password: "123456",
          },
        }).then((res) => {
          console.log(res);
        });
      });

      // axios使用方法2
      document.querySelector(".btn3").addEventListener("click", function () {
        axios
          .get("http://ajax-base-api-t.itheima.net/api/getbooks", {
            params: { bookname: "西游记" },
          })
          .then((res) => {
            console.log(res);
          });
      });

      document.querySelector(".btn4").addEventListener("click", function () {
        axios
          .post("http://ajax-api.itheima.net/api/login", {
            username: "admin",
            password: "123456",
          })
          .then((res) => {
            console.log(res);
          });
      });
    </script>
  </body>
</html>
